<template>
  <div>
    <el-card>
      <el-row justify="space-between">
        <el-col class="passList_title" :span="16">
          <img :src="require('../../assets/img/fasco.png')" alt />
          申请单查询/List
        </el-col>
      </el-row>
      <el-row class="query" justify="center">
        <el-col class="query_item" :span="10">
          <el-row>
            <div>申请-开始日期/start:</div>
            <div class="query_item1">
              <el-date-picker
                class="querydata"
                v-model="querytoData"
                type="date"
                placeholder="选择开始日期"
              ></el-date-picker>
            </div>
          </el-row>
        </el-col>
        <el-col class="query_item right" :span="10">
          <el-row>
            <el-col :span="20">
              <div>申请-结束日期/end:</div>
              <div class="query_item1">
                <el-date-picker
                  class="querydata"
                  v-model="querytoData"
                  type="date"
                  placeholder="选择结束日期"
                ></el-date-picker>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="query_item_serach" :span="4">
          <el-button class="query_btn" type="primary" icon="el-icon-search"></el-button>
          <el-button class="query_btn" type="primary" icon="el-icon-plus"></el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="queryInfo">
      <el-table ref="table" :data="trList" style="width: 100%">
        <el-table-column class="first" width="250">
          <template slot="header">
            <P>订单号/审批时限</P>
            <P>OrderNo./Approve Expire Date</P>
          </template>
          <template slot-scope="scope">
            <p>
              <b>{{scope.row.No}}</b>
            </p>
            <p class="farecolor1">{{scope.row.Date}}</p>
          </template>
        </el-table-column>
        <el-table-column width="110">
          <template slot="header">
            <P>订单状态</P>
            <P>Order Status</P>
          </template>
          <template slot-scope="scope">
            <p>
              <b>{{scope.row.ExorderList[0].OrderStatus}}</b>
            </p>
          </template>
        </el-table-column>
        <el-table-column width="220">
          <template slot="header">
            <P>预订/行程日期</P>
            <P>Booking /Departure Date</P>
          </template>
          <template slot-scope="scope">
            <p>{{scope.row.ExorderList[0].OrderCrtDatetime}}</p>
            <p>{{scope.row.ExorderList[0].OrderCrtDatetime}}</p>
          </template>
        </el-table-column>
        <el-table-column width="90">
          <template slot="header">
            <P>旅客</P>
            <P>Traveler</P>
          </template>
          <template slot-scope="scope">
            <p>{{scope.row.ExorderList[0].CltTravelerName}}</p>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>机票</P>
            <P>Ticket</P>
          </template>
          <template slot-scope="scope">
            <el-row>
              <el-col :span="16">
                <p>{{scope.row.flist[0]?scope.row.flist[0].OrigRemark+'/'+scope.row.flist[0].OrigAirport:''}}</p>
                <p>{{scope.row.flist[0]?scope.row.flist[0].DestRouteRemark+'/'+scope.row.flist[0].DestRouteAirport:''}}</p>
              </el-col>
              <el-col :span="8">
                <div class="trl_num">
                  <span>
                    <i class="el-icon-user-solid"></i>
                  </span>
                  <span>{{scope.row.flist.length}}</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>火车</P>
            <P>Train</P>
          </template>
          <template slot-scope="scope">
            <el-row>
              <el-col :span="16">
                <p>{{scope.row.tlist[0]?scope.row.tlist[0].OrigAirport+'/'+scope.row.tlist[0].OrigRemark:''}}</p>
                <p>{{scope.row.tlist[0]?scope.row.tlist[0].DestRouteAirport+'/'+scope.row.tlist[0].DestRouteRemark:''}}</p>
              </el-col>
              <el-col :span="8">
                <div class="trl_num">
                  <span>
                    <i class="el-icon-user-solid"></i>
                  </span>
                  <span>{{scope.row.tlist.length}}</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <P>酒店</P>
            <P>Hotel</P>
          </template>
          <template slot-scope="scope">
            <el-row>
              <el-col :span="16">
                <p>{{scope.row.hlist[0]?scope.row.hlist[0].OrderDescr:'' | hotel}}</p></el-col>
              <el-col :span="8">
                <div class="trl_num">
                  <span>
                    <i class="el-icon-user-solid"></i>
                  </span>
                  <span>{{scope.row.hlist.length}}</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column width="130">
          <template slot="header">
            <P>详情</P>
            <P>Detail</P>
          </template>
          <template slot-scope="scope">
            <el-button type="primary" @click="goConfirm(scope.row)">详情/Detail</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { log } from 'util';
export default {
  data() {
    return {
      querytoData: "",
      trList: [],
    };
  },
  created() {
    const trlist = require("../../plugins/travelRequest.json");
    trlist.map(item=>{
      item.flist=[];
      item.hlist=[];
      item.tlist=[];
      item.ExorderList.forEach(item1=>{
        if(item1.ProductCat == 'F'){
           item.flist.push(item1)
        }
        if(item1.ProductCat == 'H'){
           item.hlist.push(item1)
        }
        if(item1.ProductCat == 'T'){
           item.tlist.push(item1)
        }
      })

    })
     this.trList = trlist;
  },
  methods: {
    goConfirm(info) {
      const rLoading = this.$loading();

      setTimeout(() => {
        rLoading.close();
        window.sessionStorage.setItem('currentTravelInfo',JSON.stringify(info))
        this.$router.push({
          path:"/requestconfirm",
        });
      }, 500);
      
    },
  },
};
</script>      
<style lang="less" scoped>
.query {
  width: 60%;
  margin: 0 auto;
  .query_item {
    height: 76px;
    padding: 10px;
    box-sizing: border-box;
  }
  .query_item_serach {
    display: flex;
    justify-content: flex-end;
    .query_btn {
      margin: 0 0.5px;
      width: 76px;
      height: 76px;
      font-size: 30px;
      i {
        font-size: 30px;
      }
    }
  }
}
.queryInfo {
  .el-card__body {
    padding: 0 !important;

    .el-table {
      color: #212121;
      font-size: 14px;
      th {
        .cell {
          line-height: 20px;
          border-left: 1px solid #fff;
        }
        background: linear-gradient(
          180deg,
          rgba(17, 112, 187, 1) 0%,
          rgba(7, 61, 133, 1) 100%
        );
        color: #fff;
        text-align: center;
      }
      td {
        text-align: center;
      }
      .el-table__expanded-cell {
        padding: 0 20px;
        border: 1px solid #ccc;
        .el-form-item {
          .el-form-item__content {
            width: 100%;
            tr {
              border: none;
              border-bottom: 1px dotted #ccc;
            }
          }
          width: 100%;
        }
        a {
          color: #4284c9;
        }
        th {
          .cell {
            line-height: 20px;
          }
          background: #fff;
          color: #515151;
          text-align: center;
        }
      }
    }
  }
  .farecolor1 {
    color: #ff7600;
  }
  .trl_num {
    width: 70px;
    border-radius: 5px;
    border: 1px solid #4284c9;
    height: 30px;
    line-height: 30px;
    display: flex;
    margin-right: 5px;
    span {
      width: 50%;
      height: 100%;
      text-align: center;
    }
    span:nth-child(1) {
      background: #4284c9;
      color: #fff;
      width: 50%;
    }
  }
}
</style>